 <template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                label-width="68px"
            >
                <el-form-item
                    label="专病名称"
                    prop="diseaseId"
                >
                    <el-select
                        v-model="queryParams.diseaseId"
                        placeholder="请选择专病名称"
                        style="width: 240px"
                    >
                        <el-option
                            v-for="dict in dict.type.sys_manage_diseases"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                    >搜索</el-button>
                </el-form-item>
            </el-form>
            <div
                id="main"
                style="width: 600px;height:400px;"
            ></div>
        </el-row>

    </div>
</template>

<script>
import * as echarts from "echarts";
const mainChartOption = {
    color: ["#1890FF"],
    title: {
        text: "地区分布",
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
    },
    yAxis: {
        type: "category",
        data: ["北京", "上海", "重庆", "河北省", "广东省", "湖北省"],
    },
    series: [
        {
            name: "总数",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744, 630230],
        },
    ],
};
export default {
    name: "regionalDistribution",
    dicts: ["sys_manage_diseases"],
    data() {
        return { queryParams: { diseaseId: undefined } };
    },
    mounted() {
        var myChart = echarts.init(document.getElementById("main"));
        myChart.setOption(mainChartOption);
    },
    methods: {
        /**查询按钮 */
        handleQuery() {},
    },
};
</script>

<style>
</style>